import { defineComponent, reactive, toRaw, watch, ref, onMounted } from 'vue';
import FieldInfo from '@/views/indexlib/components/fieldInfo/index';
import IndexInfoPiechart from '@/views/indexlib/components/indexInfoPiechart/index';
import Question from '@/assets/images/question.svg';
import API from '@/services';
import './index.scss';
//指标库字段详情业务组件
const ColumnsInfo = defineComponent({
  name: 'ColumnsInfo',
  components: { FieldInfo, IndexInfoPiechart, Question },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  setup: (
    props: { info: any; isShow: Boolean },
    { slots, attrs, emit }: any
  ) => {
    const settingDetailList: any = ref({});

    const getSettingDetail = async () => {
      try {
        let { code, data } = await API.metricsMarket.getDetailByName({
          name: props?.info?.metricsTypeEnum
        });
        if (code === 200) {
          settingDetailList.value = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    watch(
      () => props.info,
      (val: any) => {
        getSettingDetail();
      },
      {
        immediate: true
      }
    );

    return () => {
      const { info } = props;
      return (
        <div class="columns-info-wrap">
          {/* 基本信息 */}
          <div class="chunk">
            <div class="header-title">基本信息</div>
            <div class="column-wrap-row">
              {settingDetailList.value.baseInfo
                ?.sort((a: any, b: any) => a.order - b.order)
                ?.map((item: any) => (
                  <FieldInfo key={item} val={item} info={info} />
                ))}
            </div>
          </div>

          {/* 业务信息 */}
          <div class="chunk">
            <div class="header-title">业务信息</div>
            <div class="column-wrap-row">
              {settingDetailList.value.businessInfo
                ?.sort((a: any, b: any) => a.order - b.order)
                ?.map((item: any) => (
                  <FieldInfo key={item} val={item} info={info} />
                ))}
            </div>
          </div>

          {/* 技术信息 */}
          <div class="chunk">
            <div class="header-title">技术信息</div>
            <div class="column-wrap-row">
              {settingDetailList.value.techInfo
                ?.sort((a: any, b: any) => a.order - b.order)
                ?.map((item: any) => (
                  <FieldInfo key={item} val={item} info={info} />
                ))}
            </div>
          </div>

          {/* 管理信息 */}
          <div class="chunk">
            <div class="header-title">管理信息</div>
            <div class="column-wrap-row">
              {settingDetailList.value.manageInfo
                ?.sort((a: any, b: any) => a.order - b.order)
                ?.map((item: any) => (
                  <FieldInfo key={item} val={item} info={info} />
                ))}
            </div>
          </div>
        </div>
      );
    };
  }
});

export default ColumnsInfo;
